<template>
  <div class="dv-decoration" :class="[`decoration-${normalizedType}`, { 'is-dark': isDark }]">
    <!-- Flow 流动线装饰 (Decoration1) -->
    <svg v-if="normalizedType === 'flow'" class="decoration-svg decoration-flow" :width="width" :height="height">
      <defs>
        <linearGradient :id="`gradient-flow-${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="mergedColor[0]" stop-opacity="0" />
          <stop offset="50%" :stop-color="mergedColor[0]" stop-opacity="1" />
          <stop offset="100%" :stop-color="mergedColor[0]" stop-opacity="0" />
        </linearGradient>
      </defs>
      
      <!-- 主线 -->
      <line
        class="main-line"
        x1="0"
        :y1="typeof height === 'number' ? height / 2 : 15"
        :x2="width"
        :y2="typeof height === 'number' ? height / 2 : 15"
        :stroke="`url(#gradient-flow-${uid})`"
        stroke-width="2"
      />
      
      <!-- 装饰点 -->
      <g class="decoration-dots">
        <circle
          v-for="i in 5"
          :key="i"
          class="dot"
          :cx="typeof width === 'number' ? (width / 6) * i : `${(100 / 6) * i}%`"
          :cy="typeof height === 'number' ? height / 2 : 15"
          r="2"
          :fill="mergedColor[1]"
        >
          <animate
            attributeName="r"
            :values="`2;${3 + i * 0.5};2`"
            :dur="`${2 + i * 0.2}s`"
            repeatCount="indefinite"
          />
          <animate
            attributeName="opacity"
            values="0.3;1;0.3"
            :dur="`${2 + i * 0.2}s`"
            repeatCount="indefinite"
          />
        </circle>
      </g>
      
      <!-- 流动光点 -->
      <circle
        class="flow-dot"
        cx="0"
        :cy="typeof height === 'number' ? height / 2 : 15"
        r="4"
        :fill="mergedColor[1]"
        opacity="0.8"
      >
        <animate
          attributeName="cx"
          :from="0"
          :to="width"
          dur="3s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0;0.8;0"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    
    <!-- Polyline 折线装饰 (Decoration10) -->
    <svg v-else-if="normalizedType === 'polyline'" class="decoration-svg decoration-polyline" :width="width" :height="height">
      <defs>
        <linearGradient :id="`grad-polyline-${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="mergedColor[0]" stop-opacity="0.3" />
          <stop offset="100%" :stop-color="mergedColor[1]" stop-opacity="1" />
        </linearGradient>
      </defs>
      
      <!-- 主装饰线 -->
      <polyline
        class="main-polyline"
        :points="polylinePoints"
        :stroke="`url(#grad-polyline-${uid})`"
        stroke-width="2"
        fill="none"
      />
      
      <!-- 装饰圆点 -->
      <g class="decoration-circles">
        <circle
          v-for="(point, index) in polylinePointsArray"
          :key="index"
          :cx="point.x"
          :cy="point.y"
          r="3"
          :fill="mergedColor[1]"
          opacity="0.8"
        >
          <animate
            attributeName="r"
            values="3;5;3"
            :dur="`${2 + index * 0.3}s`"
            repeatCount="indefinite"
          />
        </circle>
      </g>
      
      <!-- 流动效果 -->
      <polyline
        class="flow-line"
        :points="polylinePoints"
        :stroke="mergedColor[1]"
        stroke-width="3"
        fill="none"
        opacity="0"
        stroke-dasharray="10,10"
      >
        <animate
          attributeName="stroke-dashoffset"
          from="0"
          to="20"
          dur="1s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="opacity"
          values="0;0.6;0"
          dur="2s"
          repeatCount="indefinite"
        />
      </polyline>
    </svg>
    
    <!-- Line 简单线条 -->
    <svg v-else-if="normalizedType === 'line'" class="decoration-svg" :width="width" :height="height">
      <line
        class="deco-line"
        :x1="0"
        :y1="height / 2"
        :x2="width"
        :y2="height / 2"
        :style="{ stroke: color }"
      />
      <circle
        v-for="i in 3"
        :key="i"
        class="deco-dot"
        :cx="typeof width === 'number' ? (width / 4) * i : `${(100 / 4) * i}%`"
        :cy="typeof height === 'number' ? height / 2 : 15"
        :r="2"
        :style="{ fill: color }"
      >
        <animate
          attributeName="opacity"
          :values="`0.3;1;0.3`"
          :dur="`${2 + i * 0.5}s`"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    
    <svg v-else-if="type === 'corner'" class="decoration-svg corner" :width="width" :height="height">
      <polyline
        class="corner-line"
        :points="`0,${height} 0,0 ${width},0`"
        :style="{ stroke: color }"
      />
      <circle
        class="corner-dot"
        :cx="0"
        :cy="0"
        :r="3"
        :style="{ fill: color }"
      >
        <animate
          attributeName="r"
          values="3;5;3"
          dur="2s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    
    <svg v-else-if="type === 'wave'" class="decoration-svg" :width="width" :height="height">
      <path
        class="wave-path"
        :d="wavePath"
        :style="{ stroke: color }"
      />
    </svg>
    
    <svg v-else class="decoration-svg" :width="width" :height="height">
      <rect
        class="deco-rect"
        :x="0"
        :y="0"
        :width="width"
        :height="height"
        :style="{ stroke: color }"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  type?: 'line' | 'corner' | 'wave' | 'rect' | 'flow' | 'polyline'
  width?: number | string
  height?: number | string
  color?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  type: 'line',
  width: '100%',
  height: 30
})

// 类型别名映射
const normalizedType = computed(() => {
  const typeMap: Record<string, string> = {
    'line': 'line',
    'corner': 'corner',
    'wave': 'wave',
    'rect': 'rect',
    'flow': 'flow',
    'polyline': 'polyline'
  }
  return typeMap[props.type] || 'line'
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const width = computed(() => {
  return typeof props.width === 'number' ? props.width : '100%'
})

const height = computed(() => {
  return typeof props.height === 'number' ? props.height : 30
})

const defaultColor = computed(() => 
  isDark.value 
    ? ['#00d4ff', '#00ffff'] 
    : ['#409eff', '#66b1ff']
)

const mergedColor = computed(() => {
  if (props.color) {
    return Array.isArray(props.color) ? props.color : [props.color, props.color]
  }
  return defaultColor.value
})

const color = computed(() => mergedColor.value[0])

const uid = ref(`deco-${Math.random().toString(36).substr(2, 9)}`)

const wavePath = computed(() => {
  const w = typeof width.value === 'number' ? width.value : 200
  const h = typeof height.value === 'number' ? height.value : 30
  const amplitude = h / 3
  const frequency = 4
  
  let path = `M 0 ${h / 2}`
  for (let i = 0; i <= w; i += 5) {
    const y = h / 2 + amplitude * Math.sin((i / w) * Math.PI * frequency)
    path += ` L ${i} ${y}`
  }
  return path
})

// Polyline 装饰点计算
const polylinePointsArray = computed(() => {
  const w = typeof width.value === 'number' ? width.value : 200
  const h = typeof height.value === 'number' ? height.value / 2 : 2.5
  return [
    { x: 0, y: h },
    { x: w * 0.2, y: h * 0.5 },
    { x: w * 0.4, y: h * 1.5 },
    { x: w * 0.6, y: h * 0.8 },
    { x: w * 0.8, y: h * 1.2 },
    { x: w, y: h }
  ]
})

const polylinePoints = computed(() => {
  return polylinePointsArray.value.map(p => `${p.x},${p.y}`).join(' ')
})
</script>

<style lang="scss" scoped>
.dv-decoration {
  display: inline-block;
  
  .decoration-svg {
    display: block;
    
    line, polyline, path, rect {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    .deco-line {
      opacity: 0.5;
    }
    
    .corner-line {
      opacity: 0.8;
    }
    
    .wave-path {
      opacity: 0.6;
      animation: waveDash 3s linear infinite;
      stroke-dasharray: 5, 5;
    }
  }
  
  // Flow 装饰样式
  &.decoration-flow {
    .main-line {
      stroke-linecap: round;
      stroke-width: 3;
      opacity: 0.8;
    }
    
    .dot {
      opacity: 0.9;
    }
    
    .flow-dot {
      opacity: 0.85;
    }
  }
  
  // Polyline 装饰样式
  &.decoration-polyline {
    .main-polyline {
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.5;
      opacity: 0.8;
    }
    
    .decoration-circles circle {
      opacity: 0.9;
    }
    
    .flow-line {
      stroke-linecap: round;
      opacity: 0.6;
    }
  }
  
  &.is-dark {
    .decoration-svg {
      line, polyline, path {
        filter: drop-shadow(0 0 5px currentColor);
      }
      
      circle {
        filter: drop-shadow(0 0 3px currentColor);
      }
    }
  }
}

@keyframes waveDash {
  to {
    stroke-dashoffset: -10;
  }
}
</style>
